import {connect} from 'react-redux'
import React, {Component} from 'react'
import { Link } from "react-router-dom";

import { List } from 'antd-mobile';
const Item = List.Item;
const Brief = Item.Brief;

import Header from "../components/header";
import FooterMenu from "../components/footerMenu";
import BaseuserInfo from "../components/baseuserInfo"
import { loadUserInfo } from "../redux/actions/userAction";

export class My extends Component {
  constructor (props){
   super(props)
   this.state= {

   }
}


baseInfo(){
    return {
        selfinfo: [
            {
                title: '投注记录',
                icon: 'icon-touzhujilu',
                link: '/record'
            }, {
                title: '充提记录',
                icon: 'icon-find1',
                link: '/my/moneyrecord/chargerecord'
            }, {
                title: '今日盈亏',
                icon: 'icon-jinriyingkui',
                link: '/my/todayinput'
            },
        ],
        selfhelp:[
            {
                title: '账户安全',
                icon: 'zhanghuanquan',
                link: '/my/money'
            }, {
                title: '会员消息',
                icon: 'icon-huiyuanxiaoxi',
                link: '/my/message'
            }, {
                title: '在线客服',
                icon: 'icon-zaixiankefu',
                link: '/my/chatOnline'
            }, {
                title: '帮助中心',
                icon: 'icon-bangzhuzhongxin',
                link: '/my/help'
            },
        ]

    }

}

    componentWillMount(){
        // 不需要去加载用户信息 因为在willMount的时候 拿不到新的userName 只能在登录之后回调里面拿到
        // 所以在app.jsx 中 统一先去发送登录
        const {dispatch, user} = this.props;
        // console.log(this.props.user.get('auth').userName);        
        if (user.get('auth').get('isLogin')) {
           dispatch(loadUserInfo())
        }
        
    }

   render() {
       const {user,history} = this.props
    //    console.log(user.get('auth'));
      return <div>
          <Header title="个人中心" isIndex={true} righticon="shezhi" onClick={()=>{history.push("/my/info")}}></Header>
             <div className="container">
                <div className="user">
                    <div className="user-img">
                        <img src="/static/images/ICON_29.png" alt=""/>
                    </div>
                    <div className="user-info">
                    <BaseuserInfo user={user}></BaseuserInfo>
                        {/* <Link to="/login"><p>立即登录/注册</p></Link> */}
                        {/* <h2>{user.get('auth')},您好</h2> */}
                        {/* <h3>账户余额：<span className="red">{user.get('info').get("userMoney")}</span>元</h3> */}
                    </div>
                    <div className="user-money">
                        <Link to="/my/change/money/quick">充值</Link>
                        <div className="line"></div>
                        <Link to="/my/withdraw">提现</Link>
                    </div>
                </div>

                <List className="my-self">
                {this.baseInfo().selfinfo.map((itemself,index)=>{
                    return  <Item key={index}
                            arrow="horizontal"
                            onClick={() => {this.props.history.push(itemself.link)}}
                            ><i className={"iconfont icon-" + itemself.icon}></i>{itemself.title}</Item>
                })}
                   
                </List>

                <List className="my-self myself-help">
                {this.baseInfo().selfhelp.map((itemself,index)=>{
                    return  <Item key={index}
                            arrow="horizontal"
                            onClick={() => {this.props.history.push(itemself.link)}}
                            ><i className={"iconfont icon-" + itemself.icon}></i>{itemself.title}</Item>
                })}
                   
                </List>

             </div>

          <FooterMenu></FooterMenu>
      </div>
   } 
}

function mapStateToProps(state) {
  return {
    user: state.user // gives our component access to state through props.My
  }
}

export default connect(mapStateToProps)(My)